<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="3">
          <el-input placeholder="请输入名称" size="small" class="input-with-select" v-model="queryInfo.name" clearable
                    @clear="getSubCategoryList"/>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" size="small" style="margin-left: 10px;" @click="getSubCategoryList">搜索</el-button>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" size="small" @click="showEditDialog('')">添加</el-button>
        </el-col>
      </el-row>
      <el-table :data="subCategoryList" border stripe>
        <el-table-column label="封面">
          <template slot-scope="sc">
            <img
                :src="sc.row.logo"
                slot="reference"
                width="80"
                height="80"
            />
          </template>
        </el-table-column>
        <el-table-column label="ID" prop="id" width="70"></el-table-column>
        <el-table-column label="所属大类" prop="categoryName"></el-table-column>
        <el-table-column label="标题" prop="name"></el-table-column>
        <el-table-column label="副标题" prop="subName"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="Y"
                inactive-value="N"
                @change="updateStatus(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="规格">
          <template slot-scope="scope">
            <router-link :to="{path:'/memberCharge/subCategory/tp/list',query:{subCategoryId:scope.row.id}}">设置(<span style="color: red">{{scope.row.tpCnt}}</span>)</router-link>
          </template>
        </el-table-column>
        <el-table-column label="修改时间" prop="modifyTime" width="150"></el-table-column>
        <el-table-column label="修改" width="100">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
          </template>
        </el-table-column>
        <el-table-column label="删除">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteSubCategory(scope.row.id)"></el-button>
          </template>
        </el-table-column>
        <el-table-column label="顺序" prop="sortNum">
          <template slot-scope="scope">
            <el-button
                type="text"
                size="small"
                @click="moveUp(scope.row, scope.$index)"
                :disabled="scope.$index === 0">上移</el-button>
            <el-button
                type="text"
                size="small" style="margin-left:16px"
                @click="moveDown(scope.row, scope.$index)"
                :disabled="getFormLength(scope.$index)" >下移</el-button>
          </template>
        </el-table-column>
       
      </el-table>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="queryInfo.pageNo" :page-sizes="[5, 10, 20, 40, 60,100]"
                     :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </el-card>

    <el-dialog title="子分类信息" :visible.sync="editDialogVisible" width="70%" @close="editDialogClosed">
      <el-form :model="editForm"  ref="editFormRef" label-width="200px" class="demo-ruleForm">
        <el-form-item label="分类" prop="mobile">
          <el-select v-model="editForm.categoryId" placeholder="请选择">
            <el-option
                v-for="item in categoryList"
                :key="Number(item.id)"
                :label="item.name"
                :value="Number(item.id)">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="标题" prop="name">
          <el-input v-model="editForm.name" style="width: 70%;"></el-input>
        </el-form-item>

        <el-form-item label="副标题" prop="subName">
          <el-input v-model="editForm.subName" style="width: 70%;"></el-input>
        </el-form-item>
        <el-form-item label="账户类型" prop="subName">
          <el-radio-group v-model="editForm.chargeAccountType">
            <el-radio-button label="mobile">手机号</el-radio-button>
            <el-radio-button label="qq">QQ号</el-radio-button>
            <el-radio-button label="platformId">平台账号唯一Id</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="输入框提示语(充值账号)" prop="placeholder">
          <el-input v-model="editForm.placeholder" style="width: 70%;"></el-input>
        </el-form-item>
        <el-form-item label="输入框提示语(充值账号附加)" prop="placeholder">
          <el-input v-model="editForm.placeholderAppend" style="width: 70%;"></el-input>
        </el-form-item>
        <el-form-item label="Logo" prop="placeholder">
          <el-upload
              action="/houtai/uploadImg"
              list-type="picture-card"
              :drag="true"
              :on-preview="handlePictureCardPreview"
              :on-success="handleImgSuccess"
              :show-file-list="true"
              :file-list="uploadList"
              :on-remove="handleRemove"
              :limit="maxUploadNum">
            <i slot="default" class="el-icon-plus"></i>

          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="60%" height="60%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="商品描述" style="margin-top: 50px;">
          <quill-editor
              v-model="editForm.description"
              ref="myQuillEditor" style="width: 80%;height: 150px;"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveSubCategory()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Api from "@/api/MemberCharge.js";

export default {
    data() {
      return {
        drawer: false,
        dialogVisible: false,
        disabled: false,
        dialogImageUrl: '',
        maxUploadNum:1,
        uploadList: [],
        queryInfo: {
          id: "",
          name:'',
          categoryId:'',
          pageNo: 1,
          pageSize: 100, // 页大小
        },
        editDialogVisible: false,
        editForm: {
          id: '',
          categoryId:'',
          chargeAccountType:'mobile'
        },
        categoryList: [],
        subCategoryList: [],
        total: 0
      };
    },
    created() {
      this.getCategoryList();
      this.getSubCategoryList();
    },
    methods: {
      getCategoryList() {
        Api.getMemberChargeCategoryList({pageNo: 1, pageSize: 100}).then((res) => {
          if (res.success) {
            this.categoryList = res.data.records;
          } else {
            return this.$message.error("获取列表失败");
          }
        });
      },
      getSubCategoryList() {
        Api.getMemberChargeSubCategoryList(this.queryInfo).then((res) => {
          if (res.success) {
            this.subCategoryList = res.data.records;
            this.total = res.data.total;
          } else {
            return this.$message.error("获取列表失败");
          }
        });
      },
      saveSubCategory() {
        Api.saveMemberChargeSubCategory(this.editForm).then((res) => {
          if (res.success) {
            this.$message.success("保存成功");
            this.editDialogVisible = false;
            this.getSubCategoryList();
          } else {
            return this.$message.error("保存失败：" + res.msg);
          }
        });
      },
      updateStatus(row) {
        Api.setMemberChargeSubCategoryStatus({'id':row.id, 'status':row.status}).then(res => {
          if (res.success) {
            this.$message.success('设置成功！')
          } else {
            return this.$message.error('设置失败！')
          }
        })
      },

      async showEditDialog(id) {
        Api.getMemberChargeSubCategory({'id':id}).then(res => {
          if (res.success) {
            this.editForm = res.data;
            this.uploadList=[];
            if(this.editForm.logo){
              this.uploadList.push({'url':this.editForm.logo});
            }
            this.editDialogVisible = true
          } else {
            return this.$message.error('查询失败')
          }
        })
      },
      editDialogClosed() {

      },
      handleSizeChange(pageSize) {
        this.queryInfo.pageSize = pageSize;
        this.getSubCategoryList();
      },
      handleCurrentChange(pageNo) {
        this.queryInfo.pageNo = pageNo;
        this.getSubCategoryList();
      },
      handleRemove(file, fileList) {
        console.log(file.url);
        var newUploadList = [];
        this.uploadList.forEach(function (v, index) {
          if(file.url!=v.url){
            newUploadList.push(v);
          }
        });
        this.uploadList = newUploadList;
        this.showUploadList();
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleImgSuccess(res, file) {
        this.uploadList.push(res.data);
        this.showUploadList();
      },
      showUploadList(){
        var tm = [];
        this.uploadList.forEach(function (v, index) {
          console.warn(v.url,index);
          tm.push(v.url);
        });
        if(tm.length>0){
          this.editForm.logo = tm.join(',');
        }else {
          this.editForm.logo = '';
        }
      },
      moveUp(item, index) {
        this.subCategoryList.splice(index - 1, 0, item);
        this.subCategoryList.splice(index + 1, 1);
        this.setMoveUpAndDown();
      },
      // 下移
      moveDown(item, index) {
        this.subCategoryList.splice(index + 2, 0, item);
        this.subCategoryList.splice(index, 1);
        this.setMoveUpAndDown();
      },
      getFormLength(index) {
        if (index === this.subCategoryList.length - 1) return true;
        else return false;
      },
      setMoveUpAndDown() {
        var ids = "";
        for( let i of this.subCategoryList){
          ids = ids.concat(i.id, ",");
        }
        ids = ids.substr(0,ids.length-1);
        Api.setSubCategoryUpAndDown({'ids':ids}).then(res => {
          if (res.success) {
          } else {
            return this.$message.error('设置失败')
          }
        })
      },
      deleteSubCategory(id) {
        this.$confirm('确认删除吗？')
            .then(_ => {
              Api.deleteSubCategory({'id':id}).then((res) => {
                if (res.success) {
                  this.getSubCategoryList();
                  return this.$message.success("操作成功");
                } else {
                  return this.$message.error("操作失败：" + res.msg);
                }
              });
            }).catch(_ => {});
      }
    }
};
</script>

<style lang="less" scoped>
.logo_pic {
  max-width: 100px;
}
.upload_img {
  width: 148px;
  height: 148px;
  object-fit: cover;
  border-radius: 6px;
  margin-right: 20px;
}
</style>
